<template>
  <PageContainer>
    <Tabs v-model="activeTab">
      <Header title="申请审核">
        <template>
          <TabsNav tabBarColor="#2878FF" />
          <view class="hb-h-9 hb-box-content hb-py-2 hb-px-4">
            <TSearch text="搜索" @confirm="handleConfirm"></TSearch>
          </view>
        </template>
      </Header>
      <TabsItem name="好友申请" value="0">
        <view class="hb-p-4">
          <Paglist v-model="friendApplyData" :params="params" @register="register">
            <template v-for="item in friendApplyData" :key="item.id">
              <FriendApplyItem :item="item" @audit="handleAudit(item.id)" />
            </template>
          </Paglist>
        </view>
      </TabsItem>
      <TabsItem name="入圈申请" value="1">
        <view class="hb-p-4">
          <Paglist v-model="circleApplyData" :params="params" @register="circleRegister">
            <template v-for="item in circleApplyData" :key="item.id">
              <CircleApplyItem :item="item" @audit="handleCircleApplyAudit(item.id)" />
            </template>
          </Paglist>
        </view>
      </TabsItem>
    </Tabs>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* applyAudit 申请审核 */
  import { circleJoinApplyList, friendApplyList } from '@/api/contact';
  import { CircleJoinApplyListResult, FriendApplyListResult } from '@/api/contact/types';
  import { useConList } from '@/components/Paglist/useConList';
  import FriendApplyItem from './components/FriendApplyItem.vue';
  import CircleApplyItem from './components/CircleApplyItem.vue';

  const activeTab = ref(0);

  const friendApplyData = ref<FriendApplyListResult[]>();

  const [register, { refresh }] = useConList({ api: friendApplyList });

  const circleApplyData = ref<CircleJoinApplyListResult[]>([]);
  const [circleRegister, { refresh: circleRefresh }] = useConList({ api: circleJoinApplyList });

  const params = reactive({
    keyWord: '',
  });

  /** 搜索 */
  const handleConfirm = (val: string) => {
    params.keyWord = val;
    activeTab.value === 0 ? refresh() : circleRefresh();
  };

  const handleAudit = (id: number) => {
    navigateTo({
      name: 'friendApplyDetail',
      options: {
        id,
        success: () => refresh()
      },
    });
  };

  const handleCircleApplyAudit = (id: number) => {
    navigateTo({
      name: 'circleApplyDetail',
      options: { id, success: () => circleRefresh() },
    });
  };

  provide('api', null);
</script>

<style lang="scss" scoped></style>
